The Gooey Editor is very much like a 'Draw' type program. You select the type of item to draw, things like Buttons and Checkboxes instead of Circles and Squares. You then define where it is to go on the worksheet, the worksheet is the inside area of the window you are working on. You can later move that item, resize it, delete it, and perform other operations on it.
On a graphical computer such as the Macintosh, the ideal way of creating a graphical user interface for an application is to create it graphically. The design must be interactive and allow you to immediately see what the end product will look like. Simply "drawing" a user interface is not enough. You need to see what it will look like in the end program and also have a way of getting the "feel" of how it fits into the program.
Gooey has a simulator that instantly allows you to see what the end program will look like, without having to code or compile the program. This simulation is instantanous and can be instantly called upon to see the program design as it is taking place. You can create part of your interface design, instantly simulate it and try it out, modify it, simulate and try it out again, etc.
All the available user interface features allowed by the Macintosh are needed to properly design a program. Having only a small subset of the available features would greatly limit the program design. Gooey supports all areas of the user interface and also supports the now common methods of extending the user interface (through WDEFs and CDEFs).
In this tutorial we will go thru the steps of creating a simple program. We will use most of Gooey's features, the ones not used will be obvious to you after you become familiar with the features we cover here. Gooey automatically creates a default prototype for you to start working on.
** Project Window
The Window titled "Gooey - Untitled" is the Project window. This window contains a list of all the Alerts, Dialogs, and Windows in this prototype program. At the top of this window are two Icon buttons. The Icon button on the left will open the Menu Editor. The button on the right will open the Worksheet creation dialog, where you define the Worksheet type as a Window, Dialog, or Alert.
Press on the Worksheet creation button, the one that looks like a window. This brings up the powerful Worksheet creation dialog.
Enter the name as "About Tutorial" as the example window shows.
Select the middle icon in the "Dialogs" section. This is a Modal Dialog, as described in the help info at the bottom of this dialog.
Select the different window, dialog, and alert types to see the description for each one. When you are done then select the Modal Dialog icon before pressing the "OK" button.
** Worksheet.
You now have the worksheet open for the About Dialog we are about to design. The column of tools along the left side are the controls available for our use. The Grow box at the bottom right is for resizing the visible worksheet area. This is not the size of the Dialog, it is only the visible portion while we are in the Editor.
The rectangle that is right below and next to the "OK" button is the size of the content area of our Dialog. That size can be resized by putting the arrow cursor on the box and dragging it. Be sure to resize it back after you try out resizing it.
The Icons across the top of this worksheet are, from left to right:
a) Window Position Dialog - This brings up the dialog that allows us to position the Dialog on the screen.
b) Guidelines - This brings up guidelines for use in designing our windows.
c) Window Info Dialog - This brings up the Info dialog about our current worksheet. In this dialog we can change the name and set attributes about the worksheet.
d) Look - Start the simulator, but bring up this window as the first one to be simulated. Use this to quickly look at what your design is going to look like.
The other icons show the current size and position of the currently selected control.
** Buttons
For this dialog we do not want a cancel button. Select the "Cancel" button with the mouse. Go to the 'Edit' menu and select the 'Clear' menu item. This deletes this control from the worksheet.
We now want to make sure that the "OK" button will be outlined as the default button when this dialog is opened. Select the "OK" button with the mouse. Either double click on the "OK" button or select the "Info" menu and the "Zone Info..." menu item. This brings up the button info dialog.
Select the "Default button" checkbox. This will assure that this is the default button.
Let's look at the other options available.
The "Global" selection determines if this is a "Local" or a "Global" control. A "Global" control maintains it's state, like dimmed or not, at all times thru the program's run. A "Local" control will always revert back to the designed state whenever that dialog is opened.
The "Close dialog" selection is selected. This means that when this button is pressed then this dialog will close.
The "Enabled, not dimmed" button is selected. This means that the initial state of this button is to be active, not dimmed out. If this were not checked then this button would be initially dimmed out, inactive.
The "Default button" checkbox was already described.
The "Locked position" selection will lock the button's position and size in the worksheet. This is to prevent accidently moving it. We do not need this selected at this time.
The "Link" button brings up a "Linkages" dialog that selects what things pressing this button is attached to. We do not want this button to open another window, or do any other kind of linkage, so we will not use it yet.
The "Colors" selections bring up popup palettes for selecting different control colors. Let's leave the button black and white for now.
The "B/W/ icon in the upper left is used to move this dialog automatically to a color screen, if not already on one, to allow color selection.
Press on the "OK" button to close this dialog and lets get back to designing.
** Adding Text.
We are now ready to add a message in this About Dialog. Select the Static Text tool, the one that looks like a normal "T". After selecting it, drag out a rectangle on the worksheet. Just clicking in the worksheet will use the default size of this control. You will now have a worksheet with a Static Text area and the default text being "Message".
Position this rectangle by pressing the mouse down inside of it and dragging it around. To resize it, to aligh the right edge with the right edge of the "OK" button, press and drag in the bottom right corner of the control.
Double-click on the text box to bring up the Info dialog about Static Text.
The "Color" selection will cause the text to be displayed in the selected color.
The "Single line" attribute would cause the text to be in only one line and the text to be clipped off at the right of this rectangle area. We do not want that, we want the text to auto-wrap in the rectangle, so we leave it unchecked.
Now change the "Message" string to read something like "Gooey Tutorial program".
The name down in the "Title" area is for use in locating this string in the generated code. Since we have no interest in ever changing this string real-time in the program we can ignore it.
Press the "OK" button to close this dialog.
Resize the Text area and move the "OK" button and then resize the Dialog content area to be like the example shown:
** Simulation
Press the "QuickLook" button, the running man, to see what the dialog will look like in your final program. When done then press the "OK" button. Then, under the "File" menu select the "Quit" item. This quits the simulation.
Press the Close box on the "About Tutorial" worksheet.
** Menus
Press the Menu icon at the top of the Project window. This opens the Menu Editor.
We want the About dialog to open when the user selects the About menu item.
To tell the editor which item we are doing, even though it is already selected we will do it for practice, first select the "Apple" item in the "Menu" list.
Now select the "About" item in the "Commands" list.
** Linking
To tell it what to link to we now press the "Link" button, in the lower left corner of this window.
We now have the "Linkages" dialog open for this menu item.
If any items were already linked to this item then they would appear in this list.
Press the button with the "Window" on it to show the available Alerts, Dialogs, and Windows to open for a linkage.
Now select the About dialog, so that it is checked.
Press the "Chain" button at the top to go back to the main connected list. The Dialog will now be in this list.
Press the OK button to close this window.
Press the close box on the "Menu Editor" window to close it for now.
** Simulation
Select the "Run" menu item from the "Special" menu. This will run our current program in it's entirety. Select the "About" menu item from the Apple menu. This brings up our About dialog, but in the wrong screen position.
Press the "OK" button to close this dialog. Select "Quit" from the "File" menu to end the simulation.
Double click on the "About Tutorial" item in the Project window, this opens that worksheet.
** Screen Position.
From the "Layout" menu select the "Set Location..." menu item. This opens up the following display:
You could drag the window to the proper screen position. The problem would be when you ran this program on a different system with a different sized screen. The dialog would then show up in the wrong location. To solve this select both the "Vertically center" and the "Horzontally center" checkboxes. Now press the "OK" button to close this dialog.
Select the "Run" menu item from the "Special" menu. This will run our current program in it's entirety. Select the "About" menu item from the Apple menu. This brings up our About dialog, it is now in the correct screen position.
Press the "OK" button to close this dialog. Select "Quit" from the "File" menu to end the simulation.
Press the Close box for the "About Tutorial" worksheet, we are done with it.
** Making a Window.
We are now ready to make a window full of controls. Select the Create Worksheet icon button, that looks like a window, in the Project window.
Press the "OK button to close this dialog.
Add in the controls as shown below by:
a) selecting them from the palete.
b) Clocking or dragging thier location in the worksheet.
c) Positioning them by dragging them into place.
d) Resizing them by dragging thier size box.
Change thier name and attributes after creating them by:
a) Double clicking on them to bring up thier Info dialog.
b) Set thier name and attributes in this dialog.
c) Close this Info dialog by pressing the "OK" button.
d) Doing any repositioning or resizing necessary after the name and attribute changes were made.
** Window settings
To make sure that this window comes up automatically when this program is run we will select an option from the Window Info dialog.
From the "Info" menu select the "Window Info.." menu item. This brings up the following dialog which we use to set the "Open at startup" selection.
Before we select the "OK" button to close this dialog, let's look at some of the other options available here.
The "Layer" popup is used to set the floating layer if this were to be a floating window.
The "Links" buttons are to attach linkages to the
a) Opening of this window.
b) Closing of this window.
c) Activating this window, when another window was active.
d) Deactivating this window, switching to another window. This is where we might dim scrollbars and that type of thing.
"Change window type" allows us to change this window to another type, or even into a dialog or an alert.
Press the "OK" button now to close this dialog.
** Simulating our program.
To run our program like the user would, select the "Run" menu item from the "Special" menu.
Try out the window:
a) Type in a name.
b) Select a department.
c) Select between "Male" and "Female" and back again.
d) Select the Age popup menu for other ages.
When done select the "Quit" menu item from the "File" menu. This will end the simulation.
** Saving our prototype.
From the Gooey "File" menu select the "Save" option. Give it a name and a place to save this prototype.
This ends the tutorial. You now know the basics. The other parts of Gooey are a snap now that you know the basics. Either experiment on your own or look thru the following section for more information.
** More Gooey details.
** File Menu
New Project - This command will create a new project with the default menus as the only items defined. This menu command is only available after the previous project has been closed by the "File - Close" menu command.
Open - To open an existing project use this menu command. This menu command is only available after the previous project has been closed by the "File - Close" menu command.
Close - To close the current project, select this menu command. If there have been changes to the project since the last "File - Save", then a dialog will come up asking if you want to save before closing this project.
Save - To save the changes to the current project, simply use this menu command. All changes will be saved under the same name.
Save As - To save the current project under a new name, simply use this menu command. A new file will be created and the current project will be saved under the new name.
Revert to saved - To revert the current project to the state that it was last saved as, simply use this menu command. This is like closing the current project, without saving changes, and then reopening that same project again.
Save Map - This menu command creates a text file that contains a "map" of the current project. This map describes all menus, windows, controls, and linkages for the current project.
Print - If a worksheet is currently selected then that window, dialog, or alert will be simulated and then printed.
If the Menu Editor is currently selected then all the menus will be simulated and printed.
Print to file - This printing works the same as that above with the exception that it is printed to a "Paint" file. This allows you to edit it and place it in your program proposal.
These items are for use in the worksheet editor. Controls can be cut, copied, and pasted.
** Layout menu
Coordinates - Coordinates" is the menu item for showing the Coordinates values. These values show the size and position of the currently selected object.. The position from the upper left of the window is shown on the left half of the Coordinates area. The height and width of the currently selected control is shown in the right half of the Coordinates area.
Set Location - "Set Location..." brings up a dialog for positioning your window on the screen. Positioning on the screen is done either graphically or by entering the exact dimensions of the window. Typing in the position or the dimensions of a window and pressing return will cause the window to be resized so you can see the changes. The centering options allow you to select auto centering of your window on the main screen.
"Grids" shows grids spaced at 100 pixel increments. "Neighbors" shows the shadows of all currently open windows along with the one currently selected. This allows for positioning of windows relative to each other.
"9in Size" shows an outline for the screen dimensions of the 9in screen on the Mac+. "12in Size" shows an outline for the screen on the LC Macintosh when used with the 12in monitor. And "13in size" shows the dimensions of the standard 13in, 640 x 480, screen.
Grids - The "Grids..." menu selection brings up the grids dialog window. This is the method used for showing and setting grid spacings. You can have a visible or invisible grid.
"Grad Snap" On turns on or off the grid. "Show Grid" either shows the grid in the worksheets or hides the grid from view while still allowing it to be active.
Guidelines - The "Guidelines" menu selection turns on or off the movable grid lines for the worksheets. Simply press and drag the guideline to the position wanted.
There are four guidelines available in each worksheet. The guidelines can be dragged to show either vertical or horizontal guidelines on the worksheet. They can be dragged all around the left and top edges of the worksheet.
Bring to front - "Bring to front" and "Send to Back" allow you to get to a control that is partly or completely behind another one. This works only in the editor for getting to buried controls. Gooey reorders the controls each time it enters the simulator.
Lock/Unlock - Lock and unlock will lock or unlock the current position of the selected control. This will prevent a control from being moved by accident.
Align - All the currently selected controls will be aligned to one another using the type of alignment chosen.
** Info menu
Project Info - This menu command opens up a dialog that describes what is in the current project. "Title" allows the name of the project to be changed here.
A count of the number of windows, controls, etc., is displayed showing the complexity of the current project.
The creation date of this project is shown, as well as the last modification date for the project.
Zone Info - This selection will bring up a dialog for selecting various attributes for the currently selected control, such as the colors and the settings.
Window Info - This selection will bring up a dialog for selecting various attributes for the currently selected worksheet.
Preferences - This shows the preferences dialog for the editor. All settings will be saved from run to run.
** Special menu
Run - This type of simulation will simulate your complete design as if your program had just been started by the user.
Look - This type of simulation will instantly bring up your currently selected worksheet design for instant simulation. Even if it is a dialog that normally takes a menu selection and two button presses to get to, it will be brought up instantly.
NOTE: To exit simulation either choose the simulation menu command "Quit" in the "File" menu, or press Cmd-. (Holding the Command key down while pressing the period key).
Show/Hide Project - If the project window is visible then it can be hidden by selecting this menu command. If it is currently hidden then selecting this menu command will cause it to be shown.
Duplicate window - The current worksheet, along with all controls in it, will be duplicated and a new worksheet will be created. NOTE: Links are not duplicated.
Remove window - This will remove a worksheet. WARNING: This is not undoable. NOTE: A shortcut way to remove a window, with no Undo, is by selecting the window and pressing "Option-Delete". Another key sequence is "Option-Command-X".
Load resources - Resources from other programs can be loaded into your design. This is an easy way of "capturing" one of your previous designs for modifying it into your new design. You can choose to add a prefix to all the names being loaded. This makes it easy to tell your design elements from these new ones just loaded in.
Remember that the resources loaded in that are zones or links, like the Icons and Pictures and Sounds, will only stay in your design if you use them.
So, if you load in 10 icons and then only use one of them. When you do a 'save' of your design, the other 9 icons will not be saved with your design.
Import window - This will import a previously saved window.
Export window - The current worksheet will be exported by itself to a file. This allows you to transfer a worksheet design from one project to another and also for you to build up a set of "standard" dialog and window designs to use as a library.
** Font menu and Style menu.
These two menus are for setting the font and style of the various controls, like text, lists, etc.
